<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>DIV</title>
     
        <style type="text/css">
            body{
                background-image: url(./93867DAC60A88F55D3E5F10EA4344593.jpg);
                background-repeat: repeat-x;
                background-size: cover;
                background-position: center;
                background-size: 100% 100%;
                background-attachment: fixed;
                min-height: 100vh;
            }
     .one{
        border-style: solid;
        border-width: 3px;
        border-color: rgb(255, 0, 0);
        text-align: center;
            }
            .two{
                border-top-style: dotted;
                border-bottom-style:dotted;
                border-right-style:double;
                border-left-style:double;
                border-width: 3px;
                border-color: rgb(255, 251, 0);
                width: 50%;
                height: 500px;
            }
            .three{
                border-style: dashed;
                border-width: 3px;
                border-color: rgb(97, 247, 28);
                margin-top: -506px;
                margin-left: 50%;
            }
            .four{
                padding: 5%;
                margin: 3%;
                width: 200px;
                height: 80px;
                background-color:#ccc;
                border: 8px solid #f00;
            }
        </style>
    </head>
    <body>

    <div class="one">Div one需要设置为实现边框 </div>
    <div class="two"> Div two设计为上下点线，左右双实线</div>
    <div class="three"><img src="./u=449177107,3753401414&fm=173&app=25&f=JPEG.jpg" width="500" height="500"></div>
    <div class="four">以上边框颜色组成红绿灯</div>
    </body>
</html>
